<template>
  <view class="flex-1">
    <view
      class="px-4 rounded-xl overflow-hidden"
      v-if="settingInfo.innerAdv == 1"
    >
      <ad unit-id="123" ad-type="banner" height="378.67"></ad>
    </view>
    <view class="px-4 pt-2">
      <view
        v-if="settingInfo.innerPic"
        class="w-full h-[379rpx] rounded-xl text-white flex justify-center items-center overflow-hidden"
        @click="showModal = true"
      >
        <image
          :src="settingInfo.indexPic"
          class="w-full"
          mode="aspectFit"
        ></image>
      </view>
    </view>
    <view class="mt-[72rpx]">
      <!-- <view class="text-theme font-bold text-xl mx-auto text-center my-6"
        >体育评分标准</view
      >
      <view class="pr-4 pl-5">
        <customSteps current="0" />
      </view>  -->
      <view class="">
        <view class="flex justify-center items-center pl-[36rpx] pr-5">
          <view class="n-active pr-[50rpx]">选择地区</view>
          <!-- <view
            @click="changeTab(0)"
            :class="showArea.id ? 'active' : 'n-active'"
            >{{ showArea.id ? showArea.name : "地区" }}</view
          > -->
          <view class="aaaa">
            <uni-data-select
              :clear="false"
              v-model="showArea.id"
              :localdata="list"
              @change="change"
            ></uni-data-select
          ></view>
        </view>
      </view>
      <view class="mt-[72rpx]">
        <!-- <view class="text-[#909399] font-bold text-lg text-center"
          >选择地区</view
        > -->
        <view class="px-3 mt-[60rpx]" v-if="listTab.length">
          <view
            v-for="(item, index) in listTab"
            :key="index"
            @click="nexts(item)"
            class="w-full h-[298rpx] rounded-xl bg flex flex-col justify-between mt-[26rpx]"
          >
            <view></view>
            <view
              class="text-[48rpx] text-[#2E6CE8] font-bold text-center pt-4"
              >{{ item.name }}</view
            >
            <view class="flex justify-between items-center pb-4 px-[26rpx]">
              <view class="flex items-center">
                <image
                  src="@/static/pelple.png"
                  class="w-[26rpx] h-[26rpx]"
                ></image>
                <view class="text-[#1666F0] text-xs font-[300] pl-[10rpx]"
                  >{{ item.persons }}人已参与测评</view
                >
              </view>
              <view class="text-[#3E6EC1] text-xs font-bold"> 点击进入</view>
            </view>
          </view>
        </view>
        <view
          class="flex-1 flex justify-center items-center py-7 pb-20 mb-20"
          v-else
        >
          <up-empty
            textSize="14"
            textColor="#D5D5D5"
            text="暂无数据"
            icon="/static/empty.png"
            width="106"
            height="106"
          >
          </up-empty>
        </view>
        <!-- <view
          v-if="showArea.id"
          class="flex justify-center items-center mt-[212rpx]"
          @click="next"
        >
          <view class="text-[#3889FF] text-xl font-bold mr-1">下一步</view>
          <image src="@/static/next.png" class="w-4 h-4"></image>
        </view> -->
      </view>
    </view>
    <up-picker
      :show="show"
      :columns="list"
      keyName="name"
      @cancel="show = false"
      @confirm="confirm"
    ></up-picker>
    <up-overlay :show="showModal">
      <view
        class="flex flex-col items-center h-full justify-center pb-10"
        @click.stop
      >
        <view
          class="w-[530rpx] h-[618rpx] bg-white rounded-[20rpx] pt-[56rpx] px-5 pb-6 flex flex-col items-center"
        >
          <view class="text-black font-bold text-base"> 咨询私教 </view>
          <view
            class="text-xs text-[#4C4C4] leading-5 text-center px-1 mt-[30rpx] mb-2"
          >
            <view> 请通过下方微信二维码添加私教 </view>
          </view>
          <image
            show-menu-by-longpress
            :src="settingInfo.privateTeacher"
            class="w-[360rpx] h-[360rpx]"
            mode="widthFix"
          ></image>
          <view class="text-[#858585] text-base leading-4 mt-2"
            >长按识别二维码</view
          >
        </view>
        <image
          @click="showModal = false"
          src="@/static/close.png"
          class="w-8 h-8 mt-5"
        ></image>
      </view>
    </up-overlay>
    <customTab value="index" />
  </view>
</template>

<script setup>
import { getArea_api, getScoreList_api } from "@/api/index.js";
import { ref, computed, reactive, watch } from "vue";
import { useUserStore } from "@/stores/user.js";
import { onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import { upload_file_api } from "@/api/public.js";
const userStore = useUserStore();
const settingInfo = computed(() => userStore.setting);
onShareAppMessage(() => {
  return {
    title: "钧韬竞速",
    path: `/pages/index/index`,
  };
});
onShareTimeline(() => {
  return {
    title: "钧韬竞速",
    query: `/pages/index/index`,
  };
});
const show = ref(false);
const showModal = ref(false);
const columns = reactive([["中国", "美国", "日本"]]);
const list = ref([]);

const showArea = reactive({
  name: "",
  id: "",
});

const getList = () => {
  getArea_api().then((res) => {
    list.value = res.map((e) => {
      return {
        ...e,
        value: e.id,
        text: e.name,
      };
    });
  });
};
onLoad(() => {
  getList();
});
const systemInfo = uni.getSystemInfoSync();
// #ifdef MP
// 获取胶囊按钮位置信息
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();

// 计算导航栏高度（状态栏高度 + 胶囊按钮高度 + 上下边距）
const navHeight =
  menuButtonInfo.bottom + menuButtonInfo.top - systemInfo.statusBarHeight;

const customNavStyle = computed(() => {
  return {
    navHeight: navHeight,
    menuButtonTop: menuButtonInfo.top,
    menuButtonHeight: menuButtonInfo.height,
  };
});
// #endif
const goHot = () => {
  uni.navigateTo({
    url: "/pages/index/hotAir",
  });
};

const state = reactive({
  latitude: 33.94469,
  longitude: 108.643951,
  covers: [
    {
      id: 1,
      latitude: "",
      longitude: "",
      iconPath: "/static/mark.png",
      width: "44rpx",
      height: "56rpx",
    },
  ],
});
const next = () => {
  uni.navigateTo({
    url: "/pages/index/categorySelection?id=" + showArea.id,
  });
};

const confirm = (e) => {
  showArea.name = e.value[0].name;
  showArea.id = e.value[0].id;
  show.value = false;
  getListTab(showArea.id);
};

const activetab = ref(0);
const changeTab = (type) => {
  show.value = true;
};

const listTab = ref([]);
const getListTab = (area_id, type = 1) => {
  getScoreList_api(area_id).then((res) => {
    listTab.value = res;
  });
};

const nexts = (e) => {
  uni.navigateTo({
    url: `/pages/index/calculator?id=${e.area_id}&type=${e.score_type}`,
  });
};

const change = (e) => {
  console.log(e);
  // showArea.name = e.value[0].name;
  // showArea.id = e.value[0].id;
  getListTab(e);
};
watch(
  () => [settingInfo.value.defaultAreaId, list.value],
  () => {
    if (settingInfo.value.defaultAreaId && list.value.length) {
      const data = list.value.find(
        (item) => item.id == settingInfo.value.defaultAreaId
      );
      showArea.name = data.name;
      showArea.id = data.id;
      getListTab(showArea.id, 0);
    }
  }
);
</script>

<style scoped lang="scss">
.active {
  font-weight: 500;
  font-size: 40rpx;
  color: #000000;
  font-weight: bold;
  line-height: 56rpx;
}
.n-active {
  font-weight: 500;
  font-size: 32rpx;
  color: #909399;
  line-height: 56rpx;
  line-height: 56rpx;
}
.bg {
  background: linear-gradient(
    139deg,
    #deecff 0%,
    rgba(231, 241, 255, 0.95) 33%,
    rgba(192, 217, 254, 0.63) 67%,
    rgba(162, 200, 255, 0.7) 100%
  );
}

.aaaa {
  :deep(.uni-select) {
    width: 190rpx !important;
    border-radius: 16rpx;
    padding-left: 24rpx;
    border: 2rpx solid #a6a6a6;
    .uni-select__input-text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 700;
      font-size: 32rpx;
      color: #303133;
    }
    .uni-icons {
      font-size: 36rpx !important;
    }
  }
}
</style>
